<template>
    <div id="material" class="wrap_common" v-wechat-title="userInfo.nick_name">
        <!-- <a class="app-back" v-if="$_isShow()" @click="toGetGuestFn()">
            <img style="width: 100%" :src="constant.imgUrl + 'design/caseback.png'" alt />
        </a> -->
        <!-- 搜索块 -->
        <div class="search_wrap">
            <div class="search_wrap_body">
                <div class="search_wrap_content">
                    <section class="search_wrap_input" @click="jumpPageFn('/search')">
                        <a href class></a>
                        <van-icon class="icon-search" name="search" />搜索商品名称
                    </section>
                    <div class="search_message" @click="jumpPageFn('/user/message')">
                        <i class="icon iconfont iconxiaoxi"></i>
                    </div>
                </div>
                <div class="search_mask"></div>
            </div>
        </div>
        <!-- 轮播快 -->
        <div class="swipe_wrap">
            <swiper class="swiper" :interval="3000" :autoplay="true" indicator-color="white" indicator-active-color="#f21544">
                <swiper-item v-for="(item, index) in materialData.banner" :key="index" @click="jumpHrefFn(item.ad_link)">
                    <div class="swipe_list">
                        <img class="swipe_list_img" :src="item.img_url" alt="轮播图" mode="scaleToFill" />
                    </div>
                </swiper-item>
            </swiper>
            <div class="swipe_label_wrap">
                <div>
                    <van-icon name="passed" />
                    <span>正品保障</span>
                </div>
                <div>
                    <van-icon name="passed" />
                    <span>安装售后</span>
                </div>
                <div>
                    <van-icon name="passed" />
                    <span>厂家直供</span>
                </div>
                <div>
                    <van-icon name="passed" />
                    <span>闪电配送</span>
                </div>
            </div>
        </div>
        <!-- tab栏 -->
        <div class="module_com_wrap tab_wrap">
            <div class="tab_list">
                <div v-for="(item, index) in tabList" :key="index" @click="tabJumpPageFn(item)">
                    <div class="tab_img">
                        <img :src="`${constant.imgUrl}${item.img}`" alt mode="widthFix" />
                    </div>
                    <span>{{ item.name }}</span>
                </div>
            </div>
        </div>
        <!-- 促销活动 -->
        <!-- <div class="module_com_wrap active_wrap" v-if="materialData.promotion.length > 0"> -->
        <div class="module_com_wrap active_wrap" v-if="!$util.isEmpty(materialData.promotion)">
            <div class="module_title_wrap active_title_wrap">
                <div class="module_com_title">促销活动</div>
                <div class="module_more" @click="activeMoreBtn">
                    <div>更多</div>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="active_content_wrap">
                <app-promotions ref="appPromotions" :dataList="materialData.promotion"></app-promotions>
            </div>
        </div>
        <!-- 限时秒杀 -->
        <div class="module_com_wrap spike_wrap" v-if="seckillData.length > 0">
            <div class="module_title_wrap">
                <div class="spike_title_left">
                    <div class="module_com_title">限时秒杀</div>
                    <div class="spike_time_wrap">
                        <i class="icon iconfont iconxianshi"></i>
                        <div class="countdown_wrap">
                            <div class="countdown_text">{{ countdownObj.hh }}</div>
                            <div>:</div>
                            <div class="countdown_text">{{ countdownObj.mm }}</div>
                            <div>:</div>
                            <div class="countdown_text">{{ countdownObj.ss }}</div>
                        </div>
                    </div>
                </div>
                <div class="spike_title_right">
                    <div class="clock_list" v-for="(item, index) in seckillData" :key="item.id">
                        <div>{{ item.time }}</div>
                        <div class="clock_status">{{ index == 0 && killIsToday ? '进行中' : '即将开始' }}</div>
                    </div>
                </div>
            </div>
            <div class="spike_content_wrap">
                <div class="spike_list" v-for="(item, index) in seckillData[0].data" :key="index" @click="jumpPageFn('/seckill')">
                    <div class="spike_list_img">
                        <img :src="item.goods_thumb" alt mode="widthFix" />
                    </div>
                    <div class="ellipsis_line_com">{{ item.goods_name }}</div>
                    <div class="spike_list_price">
                        <span class="real_price_text">￥{{ item.shop_price || '无' }}</span>
                        <del class="price_text">￥{{ item.market_price || '无' }}</del>
                    </div>
                </div>
            </div>
        </div>
        <!-- 建材火拼 -->
        <div class="module_com_wrap rush_wrap" v-if="activeFireData">
            <div class="module_title_wrap">
                <div class="rush_title_left">
                    <div class="module_com_title">建材火拼</div>
                    <div class="rush_time_wrap">
                        <span class="sub_text_red">{{ activeFireData.team_data.count }}人</span>
                        <span>正在拼团</span>
                    </div>
                </div>
                <div class="module_scroll_wrap">
                    <!-- <vueSeamless :data="activeFireData.team_data.user_data" :class-option="rushScrollOption" class="rush_scroll_wrap">
                        <div class="list_item ellipsis_line_com" v-for="item in activeFireData.team_data.user_data" :key="item.id">
                            <div class="rush_title_attr">
                                <img :src="item.user_picture" alt />
                            </div>
                            <span>{{item.mobile_phone}}拼团成功</span>
                        </div>
                    </vueSeamless>-->
                </div>
            </div>
            <div class="rush_content_wrap">
                <div class="rush_list" v-for="(item, index) in activeFireData.team_goods" :key="index" @click="jumpPageFn('/team/rank')">
                    <img class="rush_tag" :src="constant.imgUrl + 'material/tag_processing.png'" alt mode="widthFix" />
                    <div class="rush_list_img">
                        <img :src="item.goods_thumb" alt mode="widthFix" />
                    </div>
                    <div class="rush_list_price ellipsis_line_com">
                        <del class="price_text">采购价:￥{{ item.shop_price || '无' }}</del>
                    </div>
                    <div class="rush_list_price ellipsis_line_com">
                        <span class="sub_text_red">拼团价:￥{{ item.team_price || '无' }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 优惠券 -->
        <div class="module_com_wrap coupon_wrap" v-if="couponsData && couponsData.coupons.length > 0">
            <div class="module_title_wrap">
                <div class="rush_title_left">
                    <div class="module_com_title">领券更给力</div>
                    <div class="rush_time_wrap">
                        <span>今日已送出</span>
                        <span class="sub_text_red">{{ couponsData.count_send }}张</span>
                    </div>
                </div>
                <div class="module_scroll_wrap">
                    <!-- <vueSeamless :data="couponsData.receive_message" :class-option="rushScrollOption" class="rush_scroll_wrap">
                        <div class="list_item ellipsis_line_com" v-for="item in couponsData.receive_message" :key="item.id">
                            <div class="rush_title_attr">
                                <img :src="item.user_picture" alt />
                            </div>
                            <span>{{ item.mobile_phone }}领券成功</span>
                        </div>
                    </vueSeamless>-->
                </div>
            </div>
            <div class="coupon_content_wrap">
                <div class="coupon_left_wrap">
                    <swiper class="swiper" :indicator-dots="true" :interval="3000" :autoplay="true" indicator-color="white" indicator-active-color="#f21544">
                        <swiper-item v-for="(item, index) in couponsData.coupons" :key="index">
                            <div class="coupon_swipe" @click="couponReceiveFn(item.cou_id, item.has)">
                                <div class="coupon_left_img">
                                    <img v-if="item.has == 0" :src="constant.imgUrl + 'material/can_coupon.png'" alt mode="widthFix" />
                                    <img v-if="item.has == 1" :src="constant.imgUrl + 'material/no_coupon.png'" alt mode="widthFix" />
                                </div>
                                <div class="coupon_left_info">
                                    <div class="coupon_left_price ellipsis_line_com">{{ item.name }}</div>
                                    <div>有效期: {{ item.start_time }}-{{ item.end_time }}</div>
                                </div>
                            </div>
                        </swiper-item>
                    </swiper>

                    <!-- <van-swipe :autoplay="3000" indicator-color="#f21544">
                        <van-swipe-item v-for="item in couponsData.coupons" :key="item.id">
                            <div class="coupon_swipe" @click="couponReceiveFn(item.cou_id, item.has)">
                                <div class="coupon_left_img">
                                    <img v-if="item.has == 0" :src="constant.imgUrl + 'material/can_coupon.png'" alt mode="widthFix" />
                                    <img v-if="item.has == 1" :src="constant.imgUrl + 'material/no_coupon.png'" alt mode="widthFix" />
                                </div>
                                <div class="coupon_left_info">
                                    <div class="coupon_left_price ellipsis_line_com">{{ item.name }}</div>
                                    <div>有效期: {{ item.start_time }}-{{ item.end_time }}</div>
                                </div>
                            </div>
                        </van-swipe-item>
                    </van-swipe>-->
                </div>
                <div class="coupon_right_wrap">
                    <div>累计已领：{{ couponsData.count_data.count }}张</div>
                    <div>生效中：{{ couponsData.count_data.effective_count }}张</div>
                    <div class="my_coupon_btn" @click="jumpPageFn('/user/coupon')">
                        <span>我的优惠券</span>
                        <van-icon name="arrow" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 大牌联合惠 -->
        <!-- <div class="offer_wrap">
            <div class="module_title_wrap">
                <div class="offer_title_left">
                    <div class="module_com_title">大牌联合惠</div>
                    <div class="offer__wrap">
                        <span class="sub_text_red">年度促销爆款给力钜惠</span>
                    </div>
                </div>
                <div class="offer_title_right">
                    <span>今日累计</span>
                    <span>已省25697.25</span>
                    <span>元</span>
                </div>
            </div>
            <div class="offer_content_wrap">
                <div class="offer_list" v-for="item in 4" :key="item.id">
                    <div class="offer_list_img">
                        <img src="http://dev.meijiabang.com/storage/images/201906/goods_img/967_G_1560207164616.jpg" alt>
                    </div>
                    <div class="ellipsis_line_com">设计之选多层设计之选多层</div>
                    <div class="rush_list_price">
                        <del class="price_text">采购价:￥313</del>
                        <span class="real_price_text">拼团价:￥135</span>
                    </div>
                </div>
            </div>
        </div>-->
        <!-- 猜你喜欢 -->
        <div class="also_like_wrap" v-if="materialData.guess_like.length > 0">
            <div class="like_title_wrap">
                <img :src="constant.imgUrl + 'material/also_like.png'" alt mode="widthFix" />
            </div>
            <div class="like_body_wrap">
                <div class="like_list" v-for="(item, index) in materialData.guess_like" :key="index" @click="jumpGoodsFn(item.goods_id)">
                    <div class="like_list_img">
                        <img :src="item.goods_thumb" alt mode="widthFix" />
                    </div>
                    <div class="like_info_wrap">
                        <div class="like_list_title ellipsis_two_line_com">{{ item.goods_name }}</div>
                        <div class="like_shop_info">
                            <div>库存{{ item.goods_number }}</div>
                            <div>销量{{ item.sales_volume }}</div>
                        </div>
                        <div class="real_price_text like_shop_price">￥{{ item.shop_price }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 客户评价 -->
        <!-- <div class="module_com_wrap eval_wrap">
            <div class="module_title_wrap">
                <div class="spike_title_left">
                    <span class="module_com_title">客户评价</span>
                    <span class="price_text">累计服务业主</span>
                    <span class="sub_text_red">1238户</span>
                </div>
            </div>
            <div class="eval_content_wrap">
                <vueSeamless :data="scrollData" :class-option="scrollOption" class="center_scroll_wrap">
                    <div class="list_item ellipsis_line_com" v-for="item in scrollData" :key="item.id">
                        <i class="icon iconfont iconhaoping"></i>
                        <span>{{ item.name }}</span>
                        <span class="eval_sub_text">{{ item.text }}</span>
                    </div>
                </vueSeamless>
            </div>
        </div>-->
        <!-- 诚邀到店 -->
        <div class="module_com_wrap to_shop_wrap">
            <div class="module_title_wrap">
                <div class="spike_title_left">
                    <span class="module_com_title">诚邀到店</span>
                    <span class="price_text">距离您有</span>
                    <span class="sub_text_red">{{ distance }}km</span>
                </div>
            </div>
            <div class="to_shop_content_wrap">
                <div class="shop_top_info_body">
                    <div class="attr_img">
                        <img :src="userInfo.user_picture" alt mode="widthFix" />
                    </div>
                    <div class="shop_top_info_tit_wrap">
                        <div class="shop_top_info_title ellipsis_line_com">{{ userInfo.nick_name }}</div>
                        <div>
                            <span>已服务</span>
                            <span class="sub_text_red">{{ userInfo.count_data.totalVistor || 0 }}</span>
                            <span>名业主</span>
                            <span class="separate_common">|</span>
                            <span>{{ userInfo.working_years }}年经营店铺</span>
                        </div>
                    </div>
                </div>
                <div class="shop_top_info_map" v-if="userInfo.lat && userInfo.lng">
                    <!-- <div class="shop_top_map_img" :style="{backgroundImage: 'url(' + mapAddrImg + ')', backgroundSize:'cover'}"></div> -->
                    <!-- <div id="mapContainer"></div> -->
                    <map class="mapContainer" :id="1994" :latitude="userInfo.lat" :longitude="userInfo.lng" :markers="mapMarkers" @tap="goNavBtn"></map>
                </div>
                <div class="shop_bottom_info_body">
                    <div>
                        <div class="shop_label">联系方式：</div>
                        <div>{{ userInfo.contact_phone || '暂无' }}</div>
                    </div>
                    <div>
                        <div class="shop_label">联系地址：</div>
                        <div class="ellipsis_two_line_com">{{ userInfo.full_address || '暂无' }}</div>
                    </div>
                    <div>
                        <div class="shop_label">营业时间：</div>
                        <div>{{ userInfo.business_hours || '暂无' }}</div>
                    </div>
                </div>
                <div class="shop_bottom_btn_body">
                    <div class="nav_btn" @click="goNavBtn" v-show="userInfo.lat && userInfo.lng">导航到店</div>
                    <div class="save_company_btn" @click="saveCardBtn">保存公司名片</div>
                </div>
            </div>
        </div>
        <footer>
            <!--  <v-normalFooter v-if="!$_isShow()" ref="normalFooter"></v-normalFooter>-->
            <ShopFotter></ShopFotter>
            <!-- <v-defotter v-show="$_isShow()" ref="defooters"></v-defotter> -->
        </footer>

        <v-sharePoster ref="sharePoster" :type="8"></v-sharePoster>
        <get-phone-pup ref="getPhonePup" :userInfo="userInfo" />
        <div class="materia-call-wrap" v-if="isShowSelf">
            <materia-call :x="10" :y="480" :image="constant.imgUrl + 'common/shop-icon.png'" />
        </div>
		<!-- 高佣金上架产品 -->
		<commission-products></commission-products>
    </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
// import Defooter from '@/pages/components/Public/Defooter'
// import NormalFooter from '@/pages/components/Public/NormalFooter'
import AppPromotions from '@/pages/components/appPromotions'
import SharePoster from '@/pages/components/sharePoster'
import ShopFotter from '@/pages/components/shopFotter'
import getPhonePup from '@/pages/components/getPhonePup'
import { getBasicUser } from '@/utils/auth.js'
import MateriaCall from '@/components/module/MateriaCall'
import CommissionProducts from '@/components/CommissionProducts'
// import vueSeamless from 'vue-seamless-scroll'
// import constant from '@/constant'
// import TMap from '@/util/map/TMap'
import { isWxMiniapp, jumpShop, getFormatDate, getDataTimestamp, getTimestamp, calcDistance } from '@/utils/common'
// import { apiBehavior } from '@/api'
// api
import { getSeckillList, getCouponsList, getActiveFire, getMaterialIndex, couponReceive } from '@/api/material'
// 图片
export default {
	name: 'material',
	components: {
		// 'v-defotter': Defooter,
		// 'v-normalFooter': NormalFooter,
		'v-sharePoster': SharePoster,
		AppPromotions,
		// vueSeamless,
		ShopFotter,
		getPhonePup,
		MateriaCall,
		CommissionProducts
	},
	data() {
		return {
			constant: this.$constant,
			// 地图配置
			mapMarkers: [],
			killIsToday: true,
			tabList: [
				{
					img: 'material/tab_icon_1.png',
					name: '热销爆款',
					url: '/hotProHome'
				},
				{
					img: 'material/tab_icon_2.png',
					name: '品牌爆款',
					url: '/brand'
				},
				{
					img: 'material/tab_icon_3.png',
					name: '限时特惠',
					url: '/seckill'
				},
				{
					img: 'material/tab_icon_4.png',
					name: '建材火拼',
					url: '/team/rank'
				},
				{
					img: 'material/tab_icon_5.png',
					name: '企业介绍',
					pathName: '/pages/company/introduce',
					type: 'self'
				}
			],
			scrollData: [
				{
					name: '李某i某（1513*******）',
					text: '瓷砖质量很好，铺砖师傅说这个十年都不会坏啊'
				},
				{
					name: '李某i某（1513*******）',
					text: '瓷砖质量很好，铺砖师傅说这个十年都不会坏啊'
				},
				{
					name: '李某i某（1513*******）',
					text: '瓷砖质量很好，铺砖师傅说这个十年都不会坏啊'
				},
				{
					name: '李某i某（1513*******）',
					text: '瓷砖质量很好，铺砖师傅说这个十年都不会坏啊'
				},
				{
					name: '李某i某（1513*******）',
					text: '瓷砖质量很好，铺砖师傅说这个十年都不会坏啊'
				}
			],
			scrollOption: {
				step: 1,
				limitMoveNum: 3,
				openWatch: true,
				waitTime: 3000,
				direction: 1,
				singleHeight: 24,
				hoverStop: false
			},
			// title右侧滚动公共配置
			rushScrollOption: {
				step: 1,
				limitMoveNum: 1,
				openWatch: true,
				waitTime: 3000,
				direction: 1,
				singleHeight: 18,
				hoverStop: false
			},
			countdownObj: {
				dateTime: '',
				hh: '00',
				mm: '00',
				ss: '00'
			},
			mapAddrImg: '',
			// 首页数据
			materialData: {
				banner: [],
				tags: [],
				promotion: [],
				guess_like: [],
				comment: {}
			},
			// 限时秒杀
			seckillData: '',
			// 优惠券
			couponsData: '',
			// 建材火拼
			activeFireData: '',
			// 是否是微信小程序
			isWxMiniapp: true,
			distance: 0,
			options: {},
			isShowSelf: false
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' })
	},
	onLoad(options) {
		this.options = options
	},
	onShow() {
		this.options = getCurrentPages()[0].options
		uni.showLoading({
  			title: '',
  			mask: true
		})
		getBasicUser(this.options.owner_user_id, true).then(res => {
			let owner_user_id = uni.getStorageSync('user_id')
			if (owner_user_id == res.user_id) {
				this.isShowSelf = true
			}

			this.init()

			uni.setNavigationBarTitle({
				title: res.nick_name
			})
			uni.hideLoading()

			this.mapMarkers = [
				{
					id: 1001,
					latitude: this.userInfo.lat || 0,
					longitude: this.userInfo.lng || 0,
					iconPath: '../../../static/images/localposition_small.png',
					title: `${this.userInfo.nick_name}的店铺`,
					callout: {
						content: `${this.userInfo.nick_name}的店铺`,
						color: '#333',
						fontSize: '16',
						borderRadius: '10',
						bgColor: '#ffffff',
						padding: '10',
						display: 'ALWAYS'
					}
				}
			]

			// this.$refs.mapNav.init(res)
			this.$refs.getPhonePup.init()

			// if (!this.$_isShow(this.owner_user_id)) {
			// 	this.$refs.normalFooter.init()
			// }
			this.totalVistor = res.count_data.totalVistor
		})
	},
	mounted() {
		// var that = this
		// that.init()
		// setTimeout(function() {
		//     that.shareweixin()
		//     that.sendtranck()
		//     // that.getlond()
		// }, 2000)
	},
	methods: {
		init() {
			console.log(this.userInfo)
			// api 请求
			this._getMaterialIndex()
			this._getSeckillList()
			this._getActiveFire()
			this._getCouponsList()
			// 功能运转
			this.distance = calcDistance(this.userInfo) || 0
			// isWxMiniapp().then(res => {
			//     this.isWxMiniapp = res
			//     if (!res && this.userInfo.lat && this.userInfo.lng) {
			//         this.initMap()
			//     }
			// })
		},
		// 获取首页信息
		_getMaterialIndex() {
			let params = {
				user_id: this.userInfo.user_id
			}
			getMaterialIndex(params).then(res => {
				if (res.status === 'success') {
					this.materialData = res.data
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		// 限时秒杀
		_getSeckillList() {
			let params = {
				user_id: this.userInfo.user_id
			}
			getSeckillList(params).then(res => {
				if (res.status === 'success') {
					this.seckillData = res.data

					if (res.data.length > 0 && res.data[0].end_time) {
						this.killIsToday = res.data[0].status
						this.countdownObj.dateTime = res.data[0].end_time.replace(/\-/g, '/')

						this.countdownFn()
					}
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		// 优惠券列表
		_getCouponsList() {
			let params = {
				user_id: this.userInfo.user_id
			}
			getCouponsList(params).then(res => {
				if (res.status === 'success') {
					this.couponsData = res.data
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		// 领取优惠券
		couponReceiveFn(id, status) {
			if (status == 1) {
				this.$toast('您已领取该优惠券！')
				return false
			}
			let params = {
				cou_id: id
			}
			couponReceive(params).then(res => {
				if (res.status === 'success') {
					this.$toast('领取成功！')
					this._getCouponsList()
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		// 建材火拼
		_getActiveFire() {
			let params = {
				user_id: this.userInfo.user_id
			}
			getActiveFire(params).then(res => {
				if (res.status === 'success') {
					this.activeFireData = res.data
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		// 保存公司名片
		saveCardBtn() {
			this.$refs.sharePoster.showMask()
		},
		// tab栏跳转
		tabJumpPageFn(item) {
			if (item.type == 'self') {
				this.$router.push({
					name: item.pathName,
					query: {
						owner_user_id: this.userInfo.user_id
					}
				})
			} else {
				jumpShop(item.url, this.userInfo.user_picture)
			}
		},
		// 跳转到拼接地址
		jumpPageFn(url) {
			jumpShop(url, this.userInfo.user_picture)
		},
		// 跳转到商城商品列表
		jumpGoodsFn(id) {
			console.log('id', id)
			let jumpUrl = '/goods/' + id
			jumpShop(jumpUrl, this.userInfo.user_picture)
		},
		// 跳转到后台返回的指定地址
		jumpHrefFn(url) {
			if (url) {
				location.href = url
			}
		},
		// 促销活动 更多活动 按钮
		activeMoreBtn() {
			this.$router.push({
				name: 'PromotionList',
				query: {
					owner_user_id: this.userInfo.user_id
				}
			})
		},
		// 倒计时
		countdownFn() {
			const end = Date.parse(new Date(this.countdownObj.dateTime))
			const now = Date.parse(new Date())
			const msec = end - now
			let hh = parseInt(msec / 1000 / 60 / 60)
			let mm = parseInt((msec / 1000 / 60) % 60)
			let ss = parseInt((msec / 1000) % 60)
			this.countdownObj.hh = hh > 0 ? (hh > 9 ? hh : '0' + hh) : '00'
			this.countdownObj.mm = mm > 0 ? (mm > 9 ? mm : '0' + mm) : '00'
			this.countdownObj.ss = ss > 0 ? (ss > 9 ? ss : '0' + ss) : '00'
			const that = this
			// if (this.countdownObj.hh == '00' && this.countdownObj.mm == '00' && this.countdownObj.ss == '00') {
			//     this._getSeckillList()
			//     return false
			// }
			setTimeout(function() {
				that.countdownFn()
			}, 1000)
		},
		// 去导航
		goNavBtn() {
			uni.openLocation({
				latitude: this.userInfo.lat,
				longitude: this.userInfo.lng,
				name: this.userInfo.region_address || '',
				address: this.userInfo.full_address || ''
			})
		},
		// 地图标注
		initMap() {
			let lat = this.userInfo.lat
			let lng = this.userInfo.lng

			// 渲染地图上的标注的点
			TMap.init().then(qq => {
				// 中心坐标
				let icon_map = require(this.constant.imgUrl + 'publicicon/localposition_small.png')
				let center = new qq.maps.LatLng(lat, lng)
				let map = new qq.maps.Map(document.getElementById('mapContainer'), {
					center: center, // 中心坐标点
					zoom: 13, // 缩放级别
					zoomControl: false, // 地图缩放的标尺是否显示
					disableDefaultUI: true // 地图控件是否显示
				})
				// 创建标记
				let Marker = new qq.maps.Marker({
					icon: icon_map,
					position: center,
					map: map,
					animation: qq.maps.MarkerAnimation.BOUNCE
				})
			})
		},
		/* 微信分享*/
		shareweixin() {
			let url = ''
			let title = ''
			let desc = ''
			const owner_user_id = this.userInfo.user_id
			const puser_id = this.options.share_user_id
			const imgurl = this.userInfo.user_picture
			const roleid = this.userInfo.role_id
			const userid = localStorage.getItem('user_id')
			const links = this.$route.path
			if (userid == owner_user_id) {
				url = `${location.protocol}//${location.host}/hkds/#${links}?owner_user_id=${owner_user_id}&share_user_id=${owner_user_id}`
			} else {
				url = `${location.protocol}//${location.host}/hkds/#${links}?owner_user_id=${owner_user_id}&share_user_id=${userid}&p_share_user_id=${puser_id}`
			}
			if (roleid == 1) {
				title = this.userInfo.nick_name
				desc = '免费设计报价，风水测试，还有最新最全的装修案例，点进来就对了！'
			} else if (roleid == 2) {
				title = this.userInfo.nick_name
				desc = '单品爆款，硬软装材料，装修必备的产品，点进来就都有了！'
			} else if (roleid == 3) {
				title = `${this.userInfo.nick_name}-设计师名片`
				desc = '收藏我的名片，马上获取免费设计！'
			} else if (roleid == 4) {
				title = `${this.userInfo.nick_name}-项目经理名片`
				desc = '收藏我的名片，随时看最新的装修案例！'
			} else if (roleid == 5) {
				title = `${this.userInfo.nick_name}名片`
				desc = '收藏我的名片，随时看最新的装修案例！'
			} else if (roleid == 6) {
				title = `${this.userInfo.nick_name}家居顾问名片`
				desc = '收藏我的名片，随时看最内部的装修攻略！'
			} else {
				title = this.userInfo.nick_name
				desc = '收藏我的名片，随时看最内部的装修攻略！'
			}
			const obj = {
				title, // 分享标题
				desc, // 分享内容
				linkurl: url, // 分享链接
				img: imgurl // 分享内容显示的图片
			}
			this.$wxshare.getJSSDK(url, obj, owner_user_id, puser_id)
		},
		sendtranck() {
			const owner_user_id = this.userInfo.user_id
			const puser_id = this.userInfo.share_user_id
			const imgurl = this.userInfo.user_picture
			const userid = localStorage.getItem('user_id')
			let data = {
				owner_user_id: owner_user_id,
				share_user_id: '',
				path: 'apihkds/api/user/profile',
				referer: location.href,
				traceType: 1,
				multi_type: 'home',
				multi_id: owner_user_id,
				title: this.userInfo.nick_name,
				picture: imgurl
			}
			if (userid == owner_user_id) {
				data.share_user_id = owner_user_id
			} else {
				data.p_share_user_id = puser_id
				data.share_user_id = userid
			}
			apiBehavior.getbehavior(data).then(res => {
				if (res.status === 'success') {
				} else {
				}
			})
		}
	},
	/**
     * 用户点击右上角分享
     */
	onShareAppMessage: function(options) {
		const shareObj = {
			title: this.userInfo.nick_name + this.userInfo.role_name,
			path: `/pages/design/material/index?owner_user_id=${this.userInfo.user_id}`
		}
		return shareObj
	}
}
</script>

<style lang="scss">
#material {
    padding-bottom: 120px;
    background-color: #f5f5f5;
    .search_wrap {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 11;
        max-width: 750px; /*no*/
        min-width: 320px; /*no*/
        .search_wrap_body {
            position: relative;
            padding: 0 20px;
            .search_wrap_content {
                display: flex;
                align-items: center;
                color: #fff;
                padding-top: 20px;
            }
            .search_message {
                width: 40px;
                position: relative;
            }
            .search_message::before {
                content: '';
                position: absolute;
                right: 0;
                display: inline-block;
                width: 14px;
                height: 14px;
                background-color: $redColor;
                border-radius: 50%;
            }
            .search_wrap_input {
                font-size: 26px;
                height: 68px;
                line-height: 68px;
                padding: 0 20px;
                margin: 0 12px;
                border-radius: 40px;
                color: #fff;
                position: relative;
                background: hsla(0, 0%, 100%, 0.4);
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }
            .icon-search {
                font-size: 40px;
                margin-right: 10px;
            }
            .search_mask {
                z-index: -1;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, transparent);
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }
    }
    .swipe_wrap {
        position: relative;
        .swiper {
            height: 370px;
            .swipe_list {
                height: 100%;
                .swipe_list_img {
                    height: 100%;
                }
            }
        }
        .search_wrap {
            position: absolute;
            top: 10px;
        }
        img {
            display: block;
        }
        .swipe_label_wrap {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            color: $fontColor2;
            padding: 24px 20px;
            background-color: #fff;
            & > div {
                width: 25%;
                display: flex;
                align-items: center;
                justify-content: center;
                i {
                    font-size: 32px;
                    margin-right: 10px;
                }
            }
        }
    }

    .tab_wrap {
        padding: 20px 0 !important;
        .tab_list {
            display: flex;
            align-items: center;
            & > div {
                width: 20%;
                text-align: center;
                margin: 0 auto;
                .tab_img {
                    width: 100px;
                    margin: 0 auto;
                    margin-bottom: 10px;
                    img {
                        height: auto;
                    }
                }
            }
        }
    }

    .active_wrap {
    }

    .spike_wrap {
        .spike_time_wrap {
            color: #f92828;
            margin-top: 6px;
            display: flex;
            align-items: center;
            .countdown_wrap {
                display: flex;
                align-items: center;
                font-weight: 600;
                .countdown_text {
                    color: #fff;
                    padding: 4px 6px 4px;
                    border-radius: 6px;
                    font-weight: 500;
                    background-color: #f92828;
                }
                & > div {
                    margin-left: 8px;
                }
            }
        }
        .spike_title_right {
            color: $fontColor3;
            display: flex;
            align-items: center;
            text-align: center;
            .clock_list {
                margin-left: 10px;
                font-weight: 600;
                font-size: 30px;
                .clock_status {
                    width: 120px;
                    height: 34px;
                    line-height: 34px;
                    border-radius: 50px;
                    margin-top: 6px;
                    font-weight: 400;
                    font-size: 20px;
                    color: #fff;
                    background-color: $fontColor5;
                }
            }
            .clock_list:first-child {
                color: #f92828;
                .clock_status {
                    background: linear-gradient(90deg, #fc6653, #f92828);
                }
            }
            // .clock_list.active {
            //     color: #f92828;
            //     .clock_status {
            //         color: #fff;
            //         background: linear-gradient(left, #fc6653, #f92828);
            //     }
            // }
        }
        .spike_content_wrap {
            display: flex;
            align-items: flex-start;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            padding-top: 8px;
            .spike_list {
                width: calc(30% - 20px);
                flex-shrink: 0;
                margin-right: 20px;
                color: $fontColor2;
                position: relative;
                & > div {
                    margin-bottom: 18px;
                }
                & > div:last-child {
                    margin-bottom: 0;
                }
            }
            .spike_list:last-child {
                margin-right: 0;
            }
        }
        .spike_content_wrap::-webkit-scrollbar {
            display: none;
        }
        .spike_content_wrap::-webkit-scrollbar {
            width: 0px;
        }
    }

    .rush_wrap {
        background-image: url($imgUrl+'material/fire_background.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        .rush_content_wrap {
            display: flex;
            align-items: flex-start;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-top: 8px;
            .rush_list {
                width: calc(30% - 20px);
                flex-shrink: 0;
                margin-right: 20px;
                color: $fontColor2;
                position: relative;
                & > div {
                    margin-bottom: 10px;
                }
                & > div:last-child {
                    margin-bottom: 0;
                }
                .rush_tag {
                    position: absolute;
                    top: -10px;
                    left: -10px;
                    width: 108px;
                }
            }
            .rush_list:last-child {
                margin-right: 0;
            }
        }
        .rush_content_wrap::-webkit-scrollbar {
            display: none;
        }
        .rush_content_wrap::-webkit-scrollbar {
            width: 0px;
        }

        .module_title_wrap {
            align-items: flex-start !important;
            .rush_time_wrap {
                color: $fontColor3;
                margin-top: 10px;
            }
        }
    }

    .also_like_wrap {
        .like_title_wrap {
            width: 30%;
            margin: 40px auto 20px;
        }
        .like_body_wrap {
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            padding: 0 10px;
            .like_list {
                width: calc(50% - 20px);
                margin: 10px 10px;
                border-radius: 20px;
                background-color: #fff;
                box-shadow: 0 4px 20px #3d666666;
                .like_list_img {
                    width: 336px;
                    height: 336px;
                    // min-height: 336px;
                    img {
                        height: 100%;
                        border-top-left-radius: 20px;
                        border-top-right-radius: 20px;
                        object-fit: cover;
                    }
                }
                .like_info_wrap {
                    font-size: 30px;
                    padding: 0 20px;
                    & > div {
                        margin: 10px 0;
                    }
                    .like_list_title {
                        min-height: 80px;
                    }
                    .like_shop_info {
                        display: flex;
                        flex: 1;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 24px;
                        color: $fontColor3;
                    }
                }
            }
        }
    }

    .coupon_wrap {
        .module_title_wrap {
            align-items: flex-start !important;
            .rush_time_wrap {
                color: $fontColor3;
                margin-top: 8px;
            }
        }
        .coupon_content_wrap {
            display: flex;
            align-items: flex-start;
            color: $fontColor2;
            .swiper {
                height: 160px;
            }
            .coupon_left_wrap {
                width: 70%;
                .coupon_swipe {
                    position: relative;
                    // width: 100%;
                    .coupon_left_img {
                    }
                    .coupon_left_info {
                        position: absolute;
                        top: 0;
                        left: 0;
                        padding: 28px 14px;
                        font-size: 22px;
                        color: #fff;
                        .coupon_left_price {
                            width: 91%;
                            font-size: 32px;
                            color: #fff661;
                            margin-bottom: 18px;
                        }
                    }
                }
                .van-swipe {
                    padding-bottom: 22px;
                    .van-swipe__indicators {
                        bottom: 0;
                        .van-swipe__indicator {
                            background-color: #ccc;
                        }
                        .van-swipe__indicator--active {
                            width: 20px;
                            height: 10px;
                            background: linear-gradient(right, #f21544, #ff7335);
                        }
                    }
                }
            }
            .coupon_right_wrap {
                width: calc(30% - 14px);
                text-align: center;
                margin-left: 14px;
                & > div {
                    width: 100%;
                    margin-bottom: 26px;
                }
                .my_coupon_btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #e43c36;
                    background-color: #ffecea;
                    text-align: center;
                    padding: 14px 0;
                    border-radius: 50px;
                    font-size: 26px;
                    margin-bottom: 0;
                }
            }
        }
    }

    .eval_wrap {
        .module_title_wrap {
            margin-bottom: 24px !important;
        }
        .center_scroll_wrap {
            height: 72px; /*no*/
            overflow: hidden;
        }
        .list_item {
            height: 24px; /*no*/
            line-height: 24px; /*no*/
            i {
                color: #ff4444;
                font-size: 24px;
            }
            .eval_sub_text {
                color: $fontColor3;
            }
        }
        .list_item:last-child {
            margin-bottom: 0;
        }
    }

    .to_shop_wrap {
        .to_shop_content_wrap {
            .shop_top_info_body {
                display: flex;
                align-items: center;
                color: $fontColor3;
                margin-bottom: 22px;
                .attr_img {
                    width: 100px;
                    height: 100px;
                    border: 1px solid $borderColorMain; /*no*/
                    border-radius: 10px;
                    margin-right: 20px;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                    }
                }
                .shop_top_info_tit_wrap {
                    width: calc(100% - 122px);
                }
                .shop_top_info_title {
                    color: #333;
                    font-size: 34px;
                    font-weight: 600;
                    margin-bottom: 14px;
                }
            }
        }
        .shop_top_info_map {
            width: 100%;
            height: 350px;
            margin-bottom: 22px;
            border-radius: 20px;
            overflow: hidden;
            .mapContainer {
                width: 100%;
                height: 100%;
                // border-radius: 20px;
            }
            .shop_top_map_img {
                height: 100%;
                // border-radius: 20px;
            }
        }
        .shop_bottom_info_body {
            & > div {
                margin-bottom: 20px;
                display: flex;
                align-items: flex-start;
                & > div:first-child {
                    flex-shrink: 0;
                }
            }
            .shop_label {
                color: $fontColor3;
            }
        }
        .shop_bottom_btn_body {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
            & > div {
                width: 48%;
                height: 90px;
                line-height: 90px;
                text-align: center;
                font-size: 32px;
                color: #e43c36;
                background-color: #ffecea;
                border-radius: 50px;
            }
            .save_company_btn {
                color: #fff;
                background: linear-gradient(to right, #ff7d6d, #ff4444);
            }
        }
    }

    // 公共模块样式
    .module_com_wrap {
        padding: 30px 20px;
        margin: 20px 20px;
        border-radius: 20px;
        background-color: #fff;
        box-shadow: 0 2px 10px #ededed;
        .module_title_wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
            .module_com_title {
                font-size: 36px;
                font-weight: 600;
                margin-right: 10px;
            }
            .module_more {
                display: flex;
                align-items: center;
                color: $fontColor3;
            }
            // 公共滚动
            .module_scroll_wrap {
                height: 18px; /*no*/
                overflow: hidden;
                color: $fontColor3;
                margin-top: 4px;
                .list_item {
                    display: flex;
                    align-items: center;
                    height: 18px; /*no */
                    .rush_title_attr {
                        width: 32px;
                        height: 32px;
                        margin-right: 10px;
                        border-radius: 50%;
                        border: 1px solid $borderColorMain; /*no*/
                        img {
                            border-radius: 50%;
                        }
                    }
                }
            }
        }
    }

    .real_price_text {
        font-weight: 600;
        color: #f92828;
    }

    .price_text {
        color: $fontColor3;
    }

    .sub_text_red {
        color: #e43c36;
    }

    & > div {
        img {
            width: 100%;
        }
    }
    .separate_common {
        margin: 0 6px;
    }

    image {
		height: auto
	}

    .materia-call-wrap {
        width: 100px;
        height: 100px;
    }
}
</style>
